<template>
  <base-section
    id="features"
    class="secondary"
  >
    <v-responsive
      class="mx-auto"
      max-width="1350"
    >
      <v-container fluid>
        <v-row>
          <v-col
            v-for="card in cards"
            :key="card.title"
            cols="12"
            sm="4"
            md="3"
          >
            <base-info-card
              align="center"
              dark
              v-bind="card"
            />
          </v-col>
        </v-row>
      </v-container>
    </v-responsive>
  </base-section>
</template>

<script>
  export default {
    name: 'SectionFeatures',

    data: () => ({
      cards: [
        {
          icon: 'mdi-monitor-clean',
          title: '全分辨率支持',
          text: '下至800x600，上至4k，全部支持',
        },
        {
          icon: 'mdi-cog-outline',
          title: '任意显示模式',
          text: '窗口化，无边框，全屏都能用',
        },
        {
          icon: 'mdi-mouse-variant',
          title: '连击功能',
          text: '拿黄金手软？按下连击键，解救你抽搐的食指',
        },
        {
          icon: 'mdi-hand-heart',
          title: '24小时无休帮助',
          text: '群里的沙雕会帮您解决所有问题',
        },
      ],
    }),
  }
</script>
